<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
        }

        ul li {
            width: 23%;
            margin: 1%;
            border: 1px solid #000;
            box-sizing: border-box;
            text-align: center;
        }

        img {
            width: 100%;
            height: 200px;
            background-color: #f00;
        }
        .page {
            display: flex;
            align-items: center;
            font-size: 20px;
        }
        .page ol {
            display: flex;
        }
        .page ol li {
            width: 30px;
            height: 30px;
            text-align: center;
            border: 1px solid #000;
            line-height: 30px;
            margin: 10px;
        }

        .page span {
            background-color: #ff0;
        }
        .active {
            color: red;
            border-color: red !important;
        }
        .disabled {
            background-color: #ddd !important;
        }
    </style>
</head>
<body>

   
    <ul id="list">
        <!-- <li>
                <img src="" alt="">
                <h3>标题</h3>
                <p>详细描述</p>
                <strong>价格</strong>
        </li> -->
    </ul>

    

    <div class="page">
        <span class="prev disabled">&lt;</span>
        <ol>
            <!-- <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li> -->
        </ol>
        <span class="next">&gt;</span>
    </div>

    <script src="../js/data.js"></script>
    <script>

        // 显示第几页  page
        // 总共有多少页  pageAll 
        // 每页显示多少条数据  pageLen 
        // 获取元素(ul  ol  上下)

        // 初始化
        //    默认显示列表
        //    显示分页  1 2 3 4 ...

        // 事件
        //    上下翻页
        //    页数翻页


        // 遇到的问题
        //    1 显示列表这个函数  会被反复的调用   就把分页的active 和 上下翻页的disabled 都放在这个函数中进行处理
        //    2 列表中需要处理分页的active  所以在init函数中 需要先调用  renderPageList 有了页数之后才调用  renderList


        function Page(list , pageList ,pageLen) {
            this.data = data ;
            this.page = 1 ;
            // 每页的长度
            this.pageLen = pageLen ;
            // 总共的页数
            this.pageAll = Math.ceil(this.data.length / this.pageLen) ;

            // 
            this.oUlList = document.querySelector(list) ;
            this.oPageList = document.querySelector(pageList) ;
            this.oPrev = document.querySelector('.prev') ;
            this.oNext = document.querySelector('.next') ;

            this.init() ;
            this.oLis = this.oPageList.querySelectorAll('li') ;
            this.event()
        }

        Page.prototype.init = function(){  

            // 显示了页数之后  才有  oLis
           
            // 显示页数
            this.renderPageList() ;   //  只会被调用一次
             // 显示列表
            this.renderList() ;     // 调用多次
        }


        // 渲染列表
        Page.prototype.renderList = function() {
            // 0-20  20-40   40-80   80-100   100-108  没有120
            const data = this.data.slice((this.page - 1) * this.pageLen , this.page * this.pageLen) ;   
            let html = data.reduce((prev , item) => {
                return prev + `<li>
                        <img src="${item.goodsSrc}" alt="">
                        <h3>${item.goodsTitle}</h3>
                        <p>${item.goodsDes}</p>
                        <strong>${item.goodsPrice}</strong>
                    </li>
                
                `
            } , '')
            this.oUlList.innerHTML = html ;
            

            // 显示分页的active
            for(let i = 0 ; i < this.oLis.length ; i++) {
                this.oLis[i].classList.remove('active') ;
            }
            this.oLis[this.page - 1].classList.add('active')

            

            // 判断能不能点击
            if(this.page === 1) {
                this.oPrev.classList.add('disabled') ;
            } else {
                this.oPrev.classList.remove('disabled') ;
            }

            if(this.page === this.pageAll) {
                this.oNext.classList.add('disabled') ;
            } else {
                this.oNext.classList.remove('disabled') ;
            }
        }


        // 渲染页数
        Page.prototype.renderPageList = function() {
            let html = '' ;
            for(let i = 1 ; i <= this.pageAll ; i++) {
                html += `<li>${i}</li>`
            }

            console.log( this.pageAll);
            this.oPageList.innerHTML = html ;


            // 渲染页数之后才能获取oLis
            this.oLis = this.oPageList.querySelectorAll('li');
        }

        Page.prototype.event = function() {
            // 上翻页
            this.oPrev.onclick = () => {
                if(this.oPrev.classList.contains('disabled')) {return}
                this.page-- ;
                this.renderList()
            }
             // 下翻页
             this.oNext.onclick = () => {
                if(this.oNext.classList.contains('disabled')) {return}
                this.page++ ;
                this.renderList()
            }

            // 分页切换
            for(let i = 0 ; i < this.oLis.length ; i++) {
                this.oLis[i].onclick = () => {
                    // 页数从1开始
                    this.page = i + 1 ;
                    this.renderList()
                }
            }
        }

        new Page('ul' , 'ol' , 6);


    </script>
    
</body>
</html>